<template>
  <div class="exam-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考试列表</span>
          <el-input
            v-model="searchQuery"
            placeholder="搜索考试"
            style="width: 200px"
            clearable
          />
        </div>
      </template>
      
      <el-table :data="filteredExams" style="width: 100%">
        <el-table-column prop="name" label="考试名称" />
        <el-table-column prop="startTime" label="开始时间" />
        <el-table-column prop="endTime" label="结束时间" />
        <el-table-column prop="duration" label="考试时长" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              :disabled="row.status !== 'ongoing'"
              @click="startExam(row)"
            >
              开始考试
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

interface Exam {
  id: string
  name: string
  startTime: string
  endTime: string
  duration: string
  status: 'upcoming' | 'ongoing' | 'ended'
}

const router = useRouter()
const searchQuery = ref('')
const exams = ref<Exam[]>([])

// 模拟数据，实际应从API获取
onMounted(() => {
  exams.value = [
    {
      id: '1',
      name: '期中考试',
      startTime: '2024-04-20 09:00',
      endTime: '2024-04-20 11:00',
      duration: '120分钟',
      status: 'upcoming'
    },
    {
      id: '2',
      name: '期末考试',
      startTime: '2024-04-25 09:00',
      endTime: '2024-04-25 11:00',
      duration: '120分钟',
      status: 'ongoing'
    }
  ]
})

const filteredExams = computed(() => {
  if (!searchQuery.value) return exams.value
  return exams.value.filter(exam => 
    exam.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const getStatusType = (status: string) => {
  switch (status) {
    case 'upcoming':
      return 'info'
    case 'ongoing':
      return 'success'
    case 'ended':
      return 'danger'
    default:
      return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'upcoming':
      return '未开始'
    case 'ongoing':
      return '进行中'
    case 'ended':
      return '已结束'
    default:
      return '未知'
  }
}

const startExam = (exam: Exam) => {
  router.push(`/student/exam/${exam.id}`)
}
</script>

<style scoped>
.exam-management {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table {
  margin-top: 20px;
}
</style> 